<template>
  <canvas id="webgg3d" class="h-[100vh] w-[100vw]"></canvas>
</template>

<script setup lang="ts">
// import { Engine, Scene } from 'babylonjs'
import * as BABYLON from 'babylonjs'
import { onMounted } from 'vue'

var canvas: any = null
// 加载3d引擎
var engine: any = null
var createScene = function () {
  // 创建场景
  var scene = new BABYLON.Scene(engine)
  // 相机
  var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene)
  camera.setTarget(BABYLON.Vector3.Zero())
  camera.attachControl(canvas, false)
  // 半球灯光
  var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene)
  // 创建球体
  var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene, false, BABYLON.Mesh.FRONTSIDE)
  // 球体的位置
  sphere.position.y = 1
  // 创建地面
  var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene, false)

  return scene
}

onMounted(() => {
  canvas = document.getElementById('webgg3d')
  console.log('canvas', canvas)
  engine = new BABYLON.Engine(canvas as any, true)
  console.log('engine', engine)

  var scene = createScene()
  engine.runRenderLoop(function () {
    scene.render()
  })

  window.addEventListener('resize', function () {
    engine.resize()
  })
})
</script>

<style scoped lang="scss"></style>
